<template>
  <div class="buy mt-15">
    <!-- 分类 -->
    <ul class="tabs radius">
      <li
        class="click"
        v-for="(v, i) in 20"
        :class="i === tabIndex ? 'active' : ''"
        :key="i"
        @click="onTabChange(i)"
      >
        电器
      </li>
    </ul>

    <!-- 商品列表 -->
    <ul class="products flex flex-wrap flex-rb">
      <li
        style="width: 50%"
        class="flex flex-center mt-15"
        v-for="(v, i) in 5"
        :key="i"
        @click="router.push('/product?id=${i}')"
      >
        <div class="ta-center click">
          <img style="width: 100px; height: 100px" />
          <div>洗面奶</div>
          <div class="cl-success">100 U</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const tabIndex = ref(0)

function onTabChange(i) {
  tabIndex.value = i
}
</script>

<style lang="scss" scoped>
.buy {
  .tabs {
    background-color: rgba($color: #000000, $alpha: 0.2);

    li {
      display: inline-block;
      padding: 5px 10px;

      &.active {
        border-radius: var(--border-radius);
        background: linear-gradient(to bottom, #6069f1, #467cf1);
      }
    }
  }
}
</style>
